import React, { useContext, useState, useEffect, useRef } from 'react';
import { Input, Form, Select } from 'antd';
import { DownOutlined }  from '@ant-design/icons';
// import { typeMap } from 'src/pages/DataManage/typeMap';


// @ts-ignore
const EditableContext = React.createContext<any>();


interface EditableRowProps {
    index: number;
}

export const EditableRow = ( { index, ...props }:EditableRowProps ) => {
	const [ form ] = Form.useForm();
	return (
		<Form form={form} component={false}>
			<EditableContext.Provider value={form}>
				<tr {...props} />
			</EditableContext.Provider>
		</Form>
	);
};

// **************************
//可编辑
// **************************

interface EditableCellProps {
    title: React.ReactNode;
    editable: boolean;
    children: React.ReactNode;
    dataIndex: string;
    record: any;
    handleSave: ( record: any ) => void;
}

export const EditableCell = ( {
	title,
	editable,
	children,
	dataIndex,
	record,
	handleSave,
	...restProps
}:EditableCellProps ) => {
	const [ editing, setEditing ] = useState( false );
	const inputRef = useRef();
	const form = useContext( EditableContext );

	useEffect( () => {
		if ( editing ) {
			// @ts-ignore
			inputRef.current.focus();
			// @ts-ignore
			inputRef.current.select();
		}
	}, [ editing ] );

	const toggleEdit = () => {
		setEditing( !editing );
		// @ts-ignore
		form.setFieldsValue( { [dataIndex]: record[dataIndex] } );
	};

	const save = async e => {
		try {
			// @ts-ignore
			const values = await form.validateFields();

			toggleEdit();
			handleSave( { ...record, ...values } );
		} catch ( errInfo ) {
			console.log( 'Save failed:', errInfo );
		}
	};

	let childNode = children;

	if ( editable ) {
		childNode = editing ? (
			<Form.Item
				style={{ margin: 0 }}
				name={dataIndex}
				rules={[
					{
						required: true,
						message: `${title} is required.`,
					},
				]}
			>
				<Input ref={inputRef} onPressEnter={save} onBlur={save} />
			</Form.Item>
		) : (
			<div className="editable-cell-value-wrap" style={{ paddingRight: 24 }} onClick={toggleEdit}>
				{children}
			</div>
		);
	}

	return <td {...restProps}>{childNode}</td>;
};

// **************************
//可编辑 可选择
// **************************

interface EditableCellProps {
	title: React.ReactNode;
	editable: boolean;
	selectable:boolean;
	children: React.ReactNode;
	dataIndex: string;
	record: any;
	handleSave: ( record: any ) => void;
	selections:any
}

export const EditSelectCell = ( {
								  title,
								  editable,
								  selectable,
								  children,
								  dataIndex,
								  record,
								  handleSave,
								  selections,
								  ...restProps
							  }:EditableCellProps ) => {
	const [ editing, setEditing ] = useState( false );
	const [ selecting,setSelection ] = useState( false );

	const inputRef = useRef();
	const form = useContext( EditableContext );

	useEffect( () => {
		if ( editing ) {
			// @ts-ignore
			inputRef.current.focus();
			// @ts-ignore
			inputRef.current.select();
		}
	}, [ editing ] );

	useEffect( () => {
		if ( selecting ) {
			// @ts-ignore
			inputRef.current.focus();
		}
	}, [ selecting ] );

	const toggleEdit = () => {
		setEditing( !editing );
		// @ts-ignore
		form.setFieldsValue( { [dataIndex]: record[dataIndex] } );
	};

	const toggleSelect = () => {
		setSelection( !selecting );
		// @ts-ignore
		form.setFieldsValue( { [dataIndex]: record[dataIndex] } );
	};

	const save = async e => {
		try {
			// @ts-ignore
			const values = await form.validateFields();

			toggleEdit();
			handleSave( { ...record, ...values } );
		} catch ( errInfo ) {
			console.log( 'Save failed:', errInfo );
		}
	};

	const saveSelet = async e => {
		try {
			// @ts-ignore
			const values = await form.validateFields();

			toggleSelect();
			handleSave( { ...record, ...values } );
		} catch ( errInfo ) {
			console.log( 'Save failed:', errInfo );
		}
	};

	let childNode = children;

	if ( editable ) {
		childNode = editing ? (
			<Form.Item
				style={{ margin: 0 }}
				name={dataIndex}
				rules={[
					{
						required: true,
						message: `${title} is required.`,
					},
				]}
			>
				<Input ref={inputRef} onPressEnter={save} onBlur={save} />
			</Form.Item>
		) : (
			<div className="editable-cell-value-wrap" style={{ paddingRight: 24 }} onClick={toggleEdit}>
				{children}
			</div>
		);
	}
	
	if( selectable ) {
		childNode = selecting
			?(
				<Form.Item
					style={{ margin: 0 }}
					name={dataIndex}
					rules={[
						{
							required: true,
							message: `${title} is required.`,
						},
					]}
				>
					<Select ref={inputRef} onChange={saveSelet} onBlur={saveSelet}>
						{
							selections.map( item =>
								<Select.Option key={item.value} value={item.value}>{item.name}</Select.Option> )
						}
					</Select>
				</Form.Item>
			)
			:(
				<div className="editable-cell-value-wrap" style={{ paddingRight: 24,display: 'flex',justifyContent: 'space-between' }} onClick={toggleSelect}>
					<div>{selections.filter( item => item.value === children[1] )[0].name}</div><div><DownOutlined /></div>
					{/*<div>{children}</div><div><DownOutlined /></div>*/}
				</div>
			);
	}

	return <td {...restProps}>{childNode}</td>;
};
